<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    首页
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <title>川塔 - 文章专栏 - 文章详情</title>
    <link rel="shortcut icon" href="{% static 'img/Logo_40.png' %}" type="image/x-icon">
    <!--Layui-->
    <!-- 比较好用的代码着色插件 -->
    <link href="{% static 'css/prettify.css' %}" rel="stylesheet" />
    <!-- 本页样式表 -->
    <link href="{% static 'css/detail.css' %}" rel="stylesheet" />
    <script src="{% static 'common/layui/lay/modules/layedit.js' %}"></script>

</head>
<body>
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a href="{% url 'common:home' %}" title="网站首页">网站首页</a>
                <a href="{% url 'article:article_list' %}" title="文章专栏">文章专栏</a>
                <a><cite>{{ article.title }}</cite></a>
            </blockquote>
            <div class="blog-main">
                <div style="margin:auto;width: 80%">
                    <!-- 文章内容 -->
                    <div class="article-detail shadow">
                        <div class="article-detail-title">
                            {{article.title}}
                        </div>
                        <div class="article-detail-info">
                            <span>编辑时间：{{article.update_date}}</span>
                            <span>作者：{{article.author}}</span>
                            <span>浏览量：{{ article.total_views }}</span>
                            {% if article.author == request.user %}
                                {% if article.status == "d" %}
                            <a href="{% url 'article:update_status' article.slug article.id %}">发布</a> |
                                    {% else %}
                                    <a href="{% url 'article:update_status' article.slug article.id %}">草稿</a> |
                            {% endif %}
                                <a href="{% url 'article:article_update' article.slug article.id %}">编辑</a> |
                                 <a href="#" onclick="(() => confirm_delete('{% url "article:article_safe_delete" article.slug article.id %}'))()">删除</a>
                            {% endif %}
                        </div>
                        <div>
                            <span style="color:#EE33EE;">标签</span>：
                             {% for tag in article.tags.all %}
                             <a href="#" class="badge badge-secondary" >{{ tag }} </a>
                            {% endfor %}
                        </div> <hr>
                        <!-- 文章主体 -->
                        <div class="article-detail-content">
                             <p style="text-align:center;">
                                <img alt="{{ article.excerpt }}" src="{{article.avatar.url}}" width="420px" height="240px"/>
                            </p><hr /><br /><br />
                            <div><p>{{article.body |safe}}</p></div>
                            
                            <hr>
                        </div>
                        <!-- 文章主体 -->
                        <!-- 点赞区域 -->
                        <div style="display: block;text-align: center;">
                        {% if user.is_authenticated %}
                            <button  id="like-button" class="btn btn-sm btn-light" data-post-slug="{{ article.slug }}" data-post-id="{{ article.id }}">
                                {% if if_praise %}
                                <i class="fa fa-thumbs-down">取消赞（{{ article.likes }}）</i>
                                {% else %}
                                <i class="fa fa-thumbs-up">赞（{{ article.likes }}）</i>
                                {% endif %}
                            </button>
                          {% endif %}
                            <hr>
                            {% for like in like_form %}
                                {{ like.like_user.username}}
                            {% endfor %}

                        <!-- 点赞区域 -->
                        <!-- 上一篇下一篇按钮区域 -->
                        <div>
                            <br /><br />
                             <ul class="pager">
                             {% if pre_article %}
                                 <li><a href="{% url 'article:article_detail' pre_article.slug pre_article.id %}">上一篇：{{ pre_article.title }}</a></li>
                             {% endif %}
                             {% if next_article %}
                                <li><a href="{% url 'article:article_detail' next_article.slug next_article.id %}">下一篇：{{ next_article }}</a></li>
                              {% endif %}
                             </ul>
                        </div>
                         <!-- 上一篇下一篇按钮区域 -->
                        </div>
                    <!-- 评论区域 -->
                    <fieldset class="layui-elem-field layui-field-title">
                        <div class="layui-elem-field layui-field-title">
                            <div class="layui-field-box">
                                {% if user.is_authenticated %}
                                        <form class="layui-form blog-editor" action="{% url 'comment:add_comment' article.slug article.id %}" method="POST">
                                        {% csrf_token %}
                                           <div class="layui-form-item">
                                                <textarea name="content" lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide" style="display: none;"></textarea>
                                            </div>
                                            <div class="layui-form-item">
                                                <button class="layui-btn" lay-submit="formLeaveMessage" lay-filter="formLeaveMessage">提交评论</button>
                                            </div>
                                        </form>
                                    <br>
                                {% else %}
                                    <br>
                                    <h5 class="row justify-content-center">
                                        请<a href="{% url 'users:login' %}" style="color: #ffe8a1">登录</a>后再评论
                                    </h5>
                                    <br>
                                {% endif %}
                                <!-- 显示评论 -->
                            {% load mptt_tags %}
                              <div class="blog-module-title">
                                  <span>共有{{ comments.count }}条评论</span>
                              </div>
                                <ul class="blog-comment">
                                     {% recursetree comments %}
                                    <li>
                                    {% with comment=node %}
                                        <div class="comment-parent">
                                            <img src="{{node.author.avatar.url}}" alt="{{node.author}}" />
                                            <div class="info">
                                                <span class="username">{{node.author}}</span>
                                            </div>
                                            <div class="content">
                                                 {{ node.content }}
                                            </div>
                                            <p class="info info-footer"><span class="time">{{node.pub_date}}</span><a id="toggle-form-btn-{{ comment.id }}" class="btn-reply" >回复</a></p>
                                            {% if not node.is_leaf_node %}
                                                <i id="comment-btn-{{ comment.id }}" style="float: right" class="fa fa-caret-down" >展开评论{{ comment.count }}</i>{% endif %}
                                            <div id="my-form-{{ comment.id }}" style="display: none;">
                                            <form action="{% url 'comment:reply_comment' article.slug article.id comment.id %}" method="POST" enctype="multipart/form-data">
                                               {% csrf_token %}
                                                <div class="layui-form-item">
                                                    <textarea id="textarea-{{ comment.id }}" name="content" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="width: 400px; display: none;"></textarea>
                                                </div>
                                                <div class="layui-form-item">
                                                    <button class="layui-btn layui-btn-mini" lay-submit="formReply" lay-filter="formReply">回复评论</button>
                                                </div>
                                            </form>
                                            </div>
                                        </div>
                                        <hr />
                                        <div id="comment-info-{{ comment.id }}" style="display: none;">
                                         {% if not node.is_leaf_node %}
                                             <div class="comment-child">
                                              {% for child in node.get_children %}
                                                    {% if child %}
                                                        <img src="{{ child.author.avatar.url }}" alt="Absolutely" />
                                                        <div class="info">
                                                            <span class="username">{{child.author}} 回复 {{child.reply_to}}</span>
                                                             <span> {{ child.content }}</span>
                                                        </div>
                                                        <p class="info"><span class="time">{{child.pub_date}}</span>
                                                            <a class="btn-reply" id="toggle-form-btn-{{ child.id }}">回复</a>
                                                            {% if not child.is_leaf_node %}<i id="comment-btn-{{ child.id }}" class="fa fa-caret-down" style="float: right">展开评论</i> {% endif %}
                                                            <div id="my-form-{{ child.id }}" style="display: none;">
                                                            <form action="{% url 'comment:reply_comment' article.slug article.id child.id %}" method="POST" enctype="multipart/form-data">
                                                               {% csrf_token %}
                                                                <div class="layui-form-item">
                                                                    <textarea id="textarea-{{ child.id }}"name="content" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="width: 400px;"></textarea>
                                                                </div>
                                                                <div class="layui-form-item">
                                                                    <button class="layui-btn layui-btn-mini" lay-submit="formReply" lay-filter="formReply">回复评论</button>
                                                                </div>
                                                            </form>
                                                            </div>
                                                        <hr /><div id="comment-info-{{ child.id }}" style="display: none;">{% include 'comment/reply.html'%}</div>
                                                    {% endif %}
                                            {% endfor %}
                                             </div>
                                         {% endif %}
                                        </div>
                                    {% endwith %}
                                    </li>
                                    {% endrecursetree %}
                                </ul>
                            </div>
                        </div>
                    </fieldset>
                    <!-- 发表评论 -->
                   

        </div>
    </div>
    
            </div>
        </div>
    </div>
    <div class="clear"></div>

{% block script %}
<!-- 比较好用的代码着色插件 -->
<script src="{% static 'js/prettify.js' %}"></script>
<script src="{% static 'js/csrf.js' %}"></script>
<!-- 本页脚本 -->
<script src="{% static 'js/detail.js' %}"></script>
<script>
//评论回复框使用layedit富文本编辑器
layui.use('layedit', function(){
  var layedit = layui.layedit;
  // 循环所有textarea
  $('textarea').each(function() {
    var id = $(this).attr('id');
    // 如果id以'demo'开头，就使用layedit进行初始化
    if (id.startsWith('textarea-')) {
      layedit.build(id, // 指定元素ID
          {height:100,}// 其他参数...
      );
    }
  });
});

//点赞脚本
$(document).ready(function() {
  $('body').on('click', '#like-button', function() {
    var post_id = $(this).data('post-id');
    var post_slug = $(this).data('post-slug');
   
    $.ajax({
      url: '/article/like-article/',
      type: 'POST',
      data: {
        'post_slug': post_slug,  // 被点赞的对象 slug
         'post_id': post_id,  // 被点赞的对象 ID
         'csrfmiddlewaretoken': '{{ csrf_token }}'
      },
      success: function(data) {
          var like_count = data.like_count;
        if (data.success === true) {
          // 修改点赞图标
          $("#like-button[data-post-id='" + post_id + "']").html('<i class="fa fa-thumbs-down">取消赞（'+ like_count +'）</i>');
        }
        if (data.success === false) {
            $("#like-button[data-post-id='" + post_id + "']").html('<i class="fa fa-thumbs-up">赞（'+ like_count+ '）</i>');
        }
      },
    });
  });
});

// 获取所有按钮元素
const toggleFormBtns = document.querySelectorAll('[id^="toggle-form-btn-"]');
const commentBtns = document.querySelectorAll('[id^="comment-btn-"]');

// 为每个按钮绑定事件监听
//回复评论输入框隐藏和显示
toggleFormBtns.forEach((btn) => {
  const formId = `my-form-${btn.id.split('-').pop()}`;
  const div = document.getElementById(formId);
  btn.addEventListener('click', function() {
    div.style.display = (div.style.display === 'none') ? 'block' : 'none';
    btn.textContent = (btn.textContent === '回复') ? '收起' : '回复';
});
});
//隐藏评论和展开评论
commentBtns.forEach((btn) => {
  const formId = `comment-info-${btn.id.split('-').pop()}`;
  const dy = document.getElementById(formId);

  btn.addEventListener('click',function() {
        dy.style.display = (dy.style.display === 'none') ? 'block' : 'none';
    btn.textContent = (btn.textContent === '展开评论') ? '收起评论' : '展开评论';
  });
});


</script>

{% endblock script %}
    <!-- layui.js -->
{% endblock content %}

</body>
</html>